<template>
  <div class="box">
    <topLogin :isIndex="false"></topLogin>
    <topNav :isActive="6"></topNav>
    <div class="wid-1200 mine-height">
      <div class="consult-box">
       
        <div class="tab-content-box">
          <div class="content-item">
            <Form ref="formData" :rules="rules" :label-width="80" :v-model="formData">
              <FormItem label="游客姓名">
                <Input style="width:302px" v-model="formData.name" />
              </FormItem>
              <FormItem label="电话">
                <Input type="tel" style="width:302px" v-model="formData.tel" />
              </FormItem>
              <FormItem label="邮箱" prop="mail">
                <Input v-model="formData.mail" style="width:302px" />
              </FormItem>
              <FormItem label="反馈类型">
                <div class="type-box">
                  <span :class="{active:isActive==0}" @click="isActive=0">游客咨询服务</span>
                  <span :class="{active:isActive==1}" @click="isActive=1">游客投诉</span>
                  <span :class="{active:isActive==2}" @click="isActive=2">游客求助</span>
                </div>
              </FormItem>
              <div v-show="isActive!=0">
                  <FormItem label="上传图片">

                </FormItem>
                <FormItem label="上传视频">

                </FormItem>
                <FormItem label="上传音频">

                </FormItem>
              </div>
              <FormItem label>
                <Input type="textarea" :autosize="{minRows: 10,maxRows: 20}" style="width:606px" />
              </FormItem>
              <FormItem>
                <Button type="warning" size="large" @click="helpSubmit('formData')">提交</Button>
              </FormItem>
            </Form>
          </div>
        </div>
      </div>
    </div>
    <footNav></footNav>
  </div>
</template>

<script>
import topNav from "@/components/topNav/index";
import footNav from "@/components/footNav/index";
import topLogin from "@/components/topLogin/index";
// 框架组件
import { Form, FormItem, Input,Button,Upload,Icon } from "view-design";

export default {
  name: "Consult",
  components: { topNav, footNav, topLogin, Form, FormItem, Input ,Button,Upload,Icon},

  data() {
    return {
      isActive: 1, //左侧菜单是否选中
      rules: {
        mail: [{ required: true, message:'邮箱不能为空', trigger: "blur",type:"email" }]
      },
      formData: {
        name: "",
        tel: "",
        mail: "",
        type: -1,
        content: ""
      }
    };
  },
  methods: {
    getContent(i) {
      this.isActive = i;
    },
    getType(i) {
      this.formData.type = i;
    },
    helpSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success("Success!");
        } else {
          this.$Message.error("Fail!");
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/css/basis";
.consult-box {
  margin-top: 50px;
  display: flex;
  .left-box {
    width: 187px;
    margin-right: 20px;
    .title {
      padding: 0 30px;
      height: 43px;
      line-height: 43px;
      background-color: $colorEarth;
      font-size: 14px;
      color: #fff;
    }
    .tab-box {
      > a {
        display: block;
        padding: 0 30px;
        margin: 20px 0;
        font-size: 14px;
        color: #333;
        &:hover {
          color: $colorEarth;
        }
        &.active {
          color: $colorEarth;
        }
      }
    }
  }
  .tab-content-box {
    flex: 1;
    .content-item {
      .type-box {
        span {
          display: inline-block;
          cursor: pointer;
          padding: 0 16px;
          height: 24px;
          margin-right: 10px;
          line-height: 24px;
          border-radius: 12px;
          background-color: #d6d6d6;
          font-size: 13px;
          color: #fff;
          &.active {
            background-color: $colorEarth;
          }
        }
      }
      button {
        width: 130px;
        height: 40px;
        color: #fff;
        font-size: 18px;
      }
    }
  }
}
</style>